<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <script src="./iconcool.js"></script>
  <style>
    html,
    body,
    ul,
    li {
      margin: 0;
      padding: 0;
    }
    .container {
      margin: 0 auto;
      padding: 50px;
      width: 980px;
    }
    .container .page-title {
      margin: 0;
      padding: 0;
    }
    .container .page-title .logo {
      height: 50px;
    }
    .tab-wrapper {
      padding-top: 26px;
      border-bottom: 1px solid #dcdee5;
      overflow: hidden;
    }
    .tab-wrapper .tab-panel {
      float: left;
      padding: 9px;
      min-width: 124px;
      font-size: 16px;
      color: #979ba5;
      text-align: center;
      cursor: pointer;
    }
    .tab-wrapper .tab-panel.active {
      color: #313238;
      border-bottom: 3px solid #361ec6;
    }
    .tab-content {
      display: none;
    }
    .tab-content.active {
      display: block;
    }
    .icon-list .icon-item {
      display: inline-block;
      margin-top: 20px;
      width: 116px;
      color: #313238;
      text-align: center;
      vertical-align: top;
      overflow: hidden;
      list-style: none;
    }
    .icon-list .icon-item .icon {
      display: inline-block;
      height: 92px;
      line-height: 92px;
      font-size: 44px;
    }
    .icon-list .icon-text {
      margin: 0;
      font-size: 14px;
      word-break: break-all;
    }
    .icon-list .colorful-icon {
      display: inline-block;
      margin-top: 20px;
      width: 116px;
      text-align: center;
      vertical-align: top;
      overflow: hidden;
      list-style: none;
    }
    .icon-list .colorful-icon .icon {
      display: block;
      margin: 0 auto;
      width: 1em;
      height: 92px;
      font-size: 44px;
    }
    .describe-title {
      margin: 60px 0 0;
      padding-bottom: 10px;
      font-size: 20px;
      font-weight: normal;
      color: #313238;
      border-bottom: 1px solid #dcdee5;
    }
    .use-describe {
      padding-left: 20px;
    }
    .use-describe li {
      margin-top: 20px;
      font-size: 14px;
      color: #313238;
      line-height: 20px;
    }
  </style>
  <title>Icon Cool</title>
</head>
<body>
  <div class="container">
    <h2 class="page-title">
      <img class="logo" src="">
    </h2>
    <div class="tab-wrapper">
      <div class="tab-panel active" data-type="singleColor">单色图标</div>
      <div class="tab-panel"  data-type="multipleColor">彩色图标</div>
    </div>
    <section class="tab-content single-color active" data-type="singleColor">
      <ul class="icon-list">
        <li class="icon-item" title="statistics">
          <span class="icon codecc-icon icon-statistics"></span>
          <p class="icon-text">statistics</p>
        </li>
        <li class="icon-item" title="branchs">
          <span class="icon codecc-icon icon-branchs"></span>
          <p class="icon-text">branchs</p>
        </li>
        <li class="icon-item" title="codecc">
          <span class="icon codecc-icon icon-codecc"></span>
          <p class="icon-text">codecc</p>
        </li>
        <li class="icon-item" title="notify">
          <span class="icon codecc-icon icon-notify"></span>
          <p class="icon-text">notify</p>
        </li>
        <li class="icon-item" title="file">
          <span class="icon codecc-icon icon-file"></span>
          <p class="icon-text">file</p>
        </li>
        <li class="icon-item" title="change">
          <span class="icon codecc-icon icon-change"></span>
          <p class="icon-text">change</p>
        </li>
        <li class="icon-item" title="sort">
          <span class="icon codecc-icon icon-sort"></span>
          <p class="icon-text">sort</p>
        </li>
        <li class="icon-item" title="pause">
          <span class="icon codecc-icon icon-pause"></span>
          <p class="icon-text">pause</p>
        </li>
        <li class="icon-item" title="pipeline">
          <span class="icon codecc-icon icon-pipeline"></span>
          <p class="icon-text">pipeline</p>
        </li>
        <li class="icon-item" title="star-gray">
          <span class="icon codecc-icon icon-star-gray"></span>
          <p class="icon-text">star-gray</p>
        </li>
        <li class="icon-item" title="repeat-rate">
          <span class="icon codecc-icon icon-repeat-rate"></span>
          <p class="icon-text">repeat-rate</p>
        </li>
        <li class="icon-item" title="codecc-record">
          <span class="icon codecc-icon icon-codecc-record"></span>
          <p class="icon-text">codecc-record</p>
        </li>
        <li class="icon-item" title="codecc-data-report">
          <span class="icon codecc-icon icon-codecc-data-report"></span>
          <p class="icon-text">codecc-data-report</p>
        </li>
        <li class="icon-item" title="setting">
          <span class="icon codecc-icon icon-setting"></span>
          <p class="icon-text">setting</p>
        </li>
        <li class="icon-item" title="complexity">
          <span class="icon codecc-icon icon-complexity"></span>
          <p class="icon-text">complexity</p>
        </li>
        <li class="icon-item" title="code-statistics">
          <span class="icon codecc-icon icon-code-statistics"></span>
          <p class="icon-text">code-statistics</p>
        </li>
        <li class="icon-item" title="repeat-file">
          <span class="icon codecc-icon icon-repeat-file"></span>
          <p class="icon-text">repeat-file</p>
        </li>
        <li class="icon-item" title="complex-fn">
          <span class="icon codecc-icon icon-complex-fn"></span>
          <p class="icon-text">complex-fn</p>
        </li>
        <li class="icon-item" title="norm">
          <span class="icon codecc-icon icon-norm"></span>
          <p class="icon-text">norm</p>
        </li>
        <li class="icon-item" title="defect">
          <span class="icon codecc-icon icon-defect"></span>
          <p class="icon-text">defect</p>
        </li>
        <li class="icon-item" title="loophole">
          <span class="icon codecc-icon icon-loophole"></span>
          <p class="icon-text">loophole</p>
        </li>
        <li class="icon-item" title="new">
          <span class="icon codecc-icon icon-new"></span>
          <p class="icon-text">new</p>
        </li>
        <li class="icon-item" title="checkstyle">
          <span class="icon codecc-icon icon-checkstyle"></span>
          <p class="icon-text">checkstyle</p>
        </li>
        <li class="icon-item" title="coverity">
          <span class="icon codecc-icon icon-coverity"></span>
          <p class="icon-text">coverity</p>
        </li>
        <li class="icon-item" title="cpplint">
          <span class="icon codecc-icon icon-cpplint"></span>
          <p class="icon-text">cpplint</p>
        </li>
        <li class="icon-item" title="goml">
          <span class="icon codecc-icon icon-goml"></span>
          <p class="icon-text">goml</p>
        </li>
        <li class="icon-item" title="pic-label-new">
          <span class="icon codecc-icon icon-pic-label-new"></span>
          <p class="icon-text">pic-label-new</p>
        </li>
        <li class="icon-item" title="edit">
          <span class="icon codecc-icon icon-edit"></span>
          <p class="icon-text">edit</p>
        </li>
        <li class="icon-item" title="record-2">
          <span class="icon codecc-icon icon-record-2"></span>
          <p class="icon-text">record-2</p>
        </li>
        <li class="icon-item" title="handler">
          <span class="icon codecc-icon icon-handler"></span>
          <p class="icon-text">handler</p>
        </li>
        <li class="icon-item" title="risky-file">
          <span class="icon codecc-icon icon-risky-file"></span>
          <p class="icon-text">risky-file</p>
        </li>
        <li class="icon-item" title="filter">
          <span class="icon codecc-icon icon-filter"></span>
          <p class="icon-text">filter</p>
        </li>
        <li class="icon-item" title="risky-function">
          <span class="icon codecc-icon icon-risky-function"></span>
          <p class="icon-text">risky-function</p>
        </li>
        <li class="icon-item" title="pipeline-2">
          <span class="icon codecc-icon icon-pipeline-2"></span>
          <p class="icon-text">pipeline-2</p>
        </li>
        <li class="icon-item" title="pie">
          <span class="icon codecc-icon icon-pie"></span>
          <p class="icon-text">pie</p>
        </li>
        <li class="icon-item" title="trend">
          <span class="icon codecc-icon icon-trend"></span>
          <p class="icon-text">trend</p>
        </li>
        <li class="icon-item" title="tips">
          <span class="icon codecc-icon icon-tips"></span>
          <p class="icon-text">tips</p>
        </li>
        <li class="icon-item" title="danger">
          <span class="icon codecc-icon icon-danger"></span>
          <p class="icon-text">danger</p>
        </li>
        <li class="icon-item" title="empty">
          <span class="icon codecc-icon icon-empty"></span>
          <p class="icon-text">empty</p>
        </li>
        <li class="icon-item" title="handler-2">
          <span class="icon codecc-icon icon-handler-2"></span>
          <p class="icon-text">handler-2</p>
        </li>
        <li class="icon-item" title="link">
          <span class="icon codecc-icon icon-link"></span>
          <p class="icon-text">link</p>
        </li>
        <li class="icon-item" title="manual-trigger">
          <span class="icon codecc-icon icon-manual-trigger"></span>
          <p class="icon-text">manual-trigger</p>
        </li>
        <li class="icon-item" title="refresh-2">
          <span class="icon codecc-icon icon-refresh-2"></span>
          <p class="icon-text">refresh-2</p>
        </li>
        <li class="icon-item" title="log-view">
          <span class="icon codecc-icon icon-log-view"></span>
          <p class="icon-text">log-view</p>
        </li>
        <li class="icon-item" title="top-nail">
          <span class="icon codecc-icon icon-top-nail"></span>
          <p class="icon-text">top-nail</p>
        </li>
        <li class="icon-item" title="filter-2">
          <span class="icon codecc-icon icon-filter-2"></span>
          <p class="icon-text">filter-2</p>
        </li>
        <li class="icon-item" title="default-mark">
          <span class="icon codecc-icon icon-default-mark"></span>
          <p class="icon-text">default-mark</p>
        </li>
        <li class="icon-item" title="codecc-arrow">
          <span class="icon codecc-icon icon-codecc-arrow"></span>
          <p class="icon-text">codecc-arrow</p>
        </li>
        <li class="icon-item" title="user-fill">
          <span class="icon codecc-icon icon-user-fill"></span>
          <p class="icon-text">user-fill</p>
        </li>
        <li class="icon-item" title="marked">
          <span class="icon codecc-icon icon-marked"></span>
          <p class="icon-text">marked</p>
        </li>
        <li class="icon-item" title="creator">
          <span class="icon codecc-icon icon-creator"></span>
          <p class="icon-text">creator</p>
        </li>
        <li class="icon-item" title="checker">
          <span class="icon codecc-icon icon-checker"></span>
          <p class="icon-text">checker</p>
        </li>
        <li class="icon-item" title="ignore">
          <span class="icon codecc-icon icon-ignore"></span>
          <p class="icon-text">ignore</p>
        </li>
        <li class="icon-item" title="comment">
          <span class="icon codecc-icon icon-comment"></span>
          <p class="icon-text">comment</p>
        </li>
        <li class="icon-item" title="commenter">
          <span class="icon codecc-icon icon-commenter"></span>
          <p class="icon-text">commenter</p>
        </li>
        <li class="icon-item" title="mark">
          <span class="icon codecc-icon icon-mark"></span>
          <p class="icon-text">mark</p>
        </li>
        <li class="icon-item" title="time">
          <span class="icon codecc-icon icon-time"></span>
          <p class="icon-text">time</p>
        </li>
        <li class="icon-item" title="trend-down-rise">
          <span class="icon codecc-icon icon-trend-down-rise"></span>
          <p class="icon-text">trend-down-rise</p>
        </li>
        <li class="icon-item" title="trend-down">
          <span class="icon codecc-icon icon-trend-down"></span>
          <p class="icon-text">trend-down</p>
        </li>
        <li class="icon-item" title="trend-rise-down">
          <span class="icon codecc-icon icon-trend-rise-down"></span>
          <p class="icon-text">trend-rise-down</p>
        </li>
        <li class="icon-item" title="trend-level">
          <span class="icon codecc-icon icon-trend-level"></span>
          <p class="icon-text">trend-level</p>
        </li>
        <li class="icon-item" title="trend-rise">
          <span class="icon codecc-icon icon-trend-rise"></span>
          <p class="icon-text">trend-rise</p>
        </li>
        <li class="icon-item" title="task-line">
          <span class="icon codecc-icon icon-task-line"></span>
          <p class="icon-text">task-line</p>
        </li>
        <li class="icon-item" title="folders">
          <span class="icon codecc-icon icon-folders"></span>
          <p class="icon-text">folders</p>
        </li>
        <li class="icon-item" title="export-excel">
          <span class="icon codecc-icon icon-export-excel"></span>
          <p class="icon-text">export-excel</p>
        </li>
      </ul>
      <h3 class="describe-title">为什么使用</h3>
      <ul class="use-describe">
        <li>弹性，在网页或者 app 上，展示字体是很便捷的。用字体图标可以很方便的改变 icon 的颜色，或者加入一些其他的效果</li>
        <li>可缩放，可以很方便的改变图标的大小</li>
        <li>矢量，字体图标是矢量的并且具有独立的分辨率，不管在高分辨率还是低分辨率，不管是在网页还是手机端，都具有很好的展示效果，不会出现锯齿或者马赛克模糊</li>
        <li>节省加载时间，字体图标很小，每个小图标只有几 kb，大大节省了加载时间</li>
      </ul>
      <h3 class="describe-title">如何使用</h3>
      <ul class="use-describe">
        <li>将整个目录复制到您的项目里</li>
        <li>引入 style.css</li>
        <li>挑选相应图标并获取类名，如 .bk-icon .icon-demo</li>
      </ul>
    </section>
    <section class="tab-content multiple-color"  data-type="multipleColor">
      <ul class="icon-list">
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-statistics"></use>
          </svg>
          <p class="icon-text">statistics</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-branchs"></use>
          </svg>
          <p class="icon-text">branchs</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-codecc"></use>
          </svg>
          <p class="icon-text">codecc</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-notify"></use>
          </svg>
          <p class="icon-text">notify</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-file"></use>
          </svg>
          <p class="icon-text">file</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-change"></use>
          </svg>
          <p class="icon-text">change</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-sort"></use>
          </svg>
          <p class="icon-text">sort</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-pause"></use>
          </svg>
          <p class="icon-text">pause</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-pipeline"></use>
          </svg>
          <p class="icon-text">pipeline</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-star-gray"></use>
          </svg>
          <p class="icon-text">star-gray</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-repeat-rate"></use>
          </svg>
          <p class="icon-text">repeat-rate</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-codecc-record"></use>
          </svg>
          <p class="icon-text">codecc-record</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-codecc-data-report"></use>
          </svg>
          <p class="icon-text">codecc-data-report</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-setting"></use>
          </svg>
          <p class="icon-text">setting</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-complexity"></use>
          </svg>
          <p class="icon-text">complexity</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-code-statistics"></use>
          </svg>
          <p class="icon-text">code-statistics</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-repeat-file"></use>
          </svg>
          <p class="icon-text">repeat-file</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-complex-fn"></use>
          </svg>
          <p class="icon-text">complex-fn</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-norm"></use>
          </svg>
          <p class="icon-text">norm</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-defect"></use>
          </svg>
          <p class="icon-text">defect</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-loophole"></use>
          </svg>
          <p class="icon-text">loophole</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-new"></use>
          </svg>
          <p class="icon-text">new</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-checkstyle"></use>
          </svg>
          <p class="icon-text">checkstyle</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-coverity"></use>
          </svg>
          <p class="icon-text">coverity</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-cpplint"></use>
          </svg>
          <p class="icon-text">cpplint</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-goml"></use>
          </svg>
          <p class="icon-text">goml</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-pic-label-new"></use>
          </svg>
          <p class="icon-text">pic-label-new</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-edit"></use>
          </svg>
          <p class="icon-text">edit</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-record-2"></use>
          </svg>
          <p class="icon-text">record-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-handler"></use>
          </svg>
          <p class="icon-text">handler</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-risky-file"></use>
          </svg>
          <p class="icon-text">risky-file</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-filter"></use>
          </svg>
          <p class="icon-text">filter</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-risky-function"></use>
          </svg>
          <p class="icon-text">risky-function</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-pipeline-2"></use>
          </svg>
          <p class="icon-text">pipeline-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-pie"></use>
          </svg>
          <p class="icon-text">pie</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-trend"></use>
          </svg>
          <p class="icon-text">trend</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-tips"></use>
          </svg>
          <p class="icon-text">tips</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-danger"></use>
          </svg>
          <p class="icon-text">danger</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-empty"></use>
          </svg>
          <p class="icon-text">empty</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-handler-2"></use>
          </svg>
          <p class="icon-text">handler-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-link"></use>
          </svg>
          <p class="icon-text">link</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-manual-trigger"></use>
          </svg>
          <p class="icon-text">manual-trigger</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-refresh-2"></use>
          </svg>
          <p class="icon-text">refresh-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-log-view"></use>
          </svg>
          <p class="icon-text">log-view</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-top-nail"></use>
          </svg>
          <p class="icon-text">top-nail</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-filter-2"></use>
          </svg>
          <p class="icon-text">filter-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-default-mark"></use>
          </svg>
          <p class="icon-text">default-mark</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-codecc-arrow"></use>
          </svg>
          <p class="icon-text">codecc-arrow</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-user-fill"></use>
          </svg>
          <p class="icon-text">user-fill</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-marked"></use>
          </svg>
          <p class="icon-text">marked</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-creator"></use>
          </svg>
          <p class="icon-text">creator</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-checker"></use>
          </svg>
          <p class="icon-text">checker</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-ignore"></use>
          </svg>
          <p class="icon-text">ignore</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-comment"></use>
          </svg>
          <p class="icon-text">comment</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-commenter"></use>
          </svg>
          <p class="icon-text">commenter</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-mark"></use>
          </svg>
          <p class="icon-text">mark</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-time"></use>
          </svg>
          <p class="icon-text">time</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-trend-down-rise"></use>
          </svg>
          <p class="icon-text">trend-down-rise</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-trend-down"></use>
          </svg>
          <p class="icon-text">trend-down</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-trend-rise-down"></use>
          </svg>
          <p class="icon-text">trend-rise-down</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-trend-level"></use>
          </svg>
          <p class="icon-text">trend-level</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-trend-rise"></use>
          </svg>
          <p class="icon-text">trend-rise</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-task-line"></use>
          </svg>
          <p class="icon-text">task-line</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-folders"></use>
          </svg>
          <p class="icon-text">folders</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#icon-export-excel"></use>
          </svg>
          <p class="icon-text">export-excel</p>
        </li>
      </ul>
      <h3 class="describe-title">为什么使用</h3>
      <ul class="use-describe">
          <li>支持彩色图标</li>
          <li>跨 SVG 使用，使用 use 可调用文档中加载的所有 SVG 图标 </li>
      </ul>
      <h3 class="describe-title">如何使用</h3>
      <ul class="use-describe">
        <li>将下载的资源文件中 iconcool.js 文件外部资源通过 script 标签引入</li>
        <li>在 html 模板文件中挑选对应的对应图标的名称使用，例如：
          <pre>
    &lt;svg aria-hidden="true"&gt;
      &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
    &lt;/svg&gt;
          </pre>
        </li>
      </ul>
      </section>
    </section>
  </div>
  <script>
    document.addEventListener('click', function (e) {
      if (event.target.classList.contains('tab-panel')) {
        const type = event.target.dataset.type
        const tabPanels = document.querySelectorAll('.tab-panel')
        const tabContents = document.querySelectorAll('.tab-content')

        tabPanels.forEach(function(item) {
          item.classList.remove('active')
        })

        e.target.classList.add('active')
        
        tabContents.forEach(function (item) {
          const contentType = item.dataset.type
          if (contentType === type) {
            item.classList.add('active')
          } else {
            item.classList.remove('active')
          }
        })
      }
      
    })
  </script>
</body>
</html>